<template>
  <div class="adv_bj">
    <div class="flex-column" style="padding-top: 130px;">
      <div class="adv_tit">{{ bigTit }}</div>
      <div class="adv_cont">多元覆盖用户各类生活场景，占据用户各种碎片时间</div>
    </div>

    <div class="flex-center" style="margin-top: 30px;padding-bottom: 50px;">
      <div style="padding-right: 131px;padding-left: 50px;">
        <!-- <el-carousel autoplay style="width: 300px; height: 395px">
          <el-carousel-item v-for="item in advList" :key="item.img">
            <img :src="item.img" style="width: 100%; height: 100%" />
          </el-carousel-item>
        </el-carousel> -->
        <div style="width: 340px; height: 557px">
          <!-- <div style="width: 96%; height: 60%"> -->
          <img :src="advList[0].img" style="width: 100%; height: 100%" />
        </div>
      </div>
      <div>
        <div class="flex-align" v-if="putSta == 0">
          <div v-for="(item, index) in advTypeList" :key="index" class="advType_tit" @click="toChangeAType(index)"
            :style="advTypeIdx == index
              ? 'font-size: 28px;font-weight: bold;color: #FFFFFF; border-bottom: 2px solid #FFFFFF;'
              : ''
              ">
            {{ item.title }}
          </div>
        </div>
        <div v-else>
          <div class="item_adv">
            <div class="adt_n flex-align item_adv1">
              <span>广告标题</span><a-input class="adt_inp" v-model="advTitle" placeholder="建议10~20个字" :maxLength="30" />
            </div>
            <div class="item_adv1" style="height: 120px;display: flex;align-items: center;">
              <div class="adt_n" style="width: 160px;"><span>广告内容</span></div>
              <a-upload name="image" :accept="imgIdx == 1 ? '.gif.jpeg,.png' : '.jpeg,.png'"
                :action="$baseURL + '/biz/uploadImgage'" :headers="headers" list-type="picture-card"
                :file-list="fileListAdv" @preview="handlePreview" @change="upChangeAdv" v-if="advTypeIdx == 0">
                <div v-if="fileListAdv.length < 1">
                  <a-icon type="plus" />
                  <div class="ant-upload-text" v-if="imgIdx == 1">
                    建议尺寸780px*1688px
                  </div>
                  <div class="ant-upload-text" v-else>建议尺寸247px*192px</div>
                </div>
              </a-upload>
              <div v-if="advTypeIdx == 1">
                <a-upload accept="video/*" :action="$baseURL + '/biz/uploadFile'" :headers="headers"
                  list-type="picture-card" :file-list="fileListV" :showUploadList="false" @change="upChangeVideo"
                  v-show="!videoUrl">
                  <div v-if="fileListV.length < 1">
                    <a-icon type="plus" />
                    <div class="ant-upload-text">
                      建议尺寸375px*667px;视频15s内
                    </div>
                  </div>
                </a-upload>
                <div v-show="videoUrl" style="margin-top: -50px">
                  <video controls controlsList="nodownload noplaybackrate" :disablePictureInPicture="true"
                    style="width: 154px; height: 154px" :src="$staticURL + videoUrl" />
                  <a-icon @click="(videoUrl = ''), (fileListV = '')" type="close-circle" theme="filled" style="
                      color: #fff;
                      font-size: 18px;
                      position: relative;
                      right: 30px;
                      top: -88px;
                    " />
                </div>
              </div>
              <a-upload name="image" accept=".jpeg,.png,.jpg" :action="$baseURL + '/biz/uploadImgage'"
                :headers="headers" list-type="picture-card" :file-list="fileListAdv" @preview="handlePreview"
                @change="upChangeAdv" v-if="advTypeIdx == 2">
                <div v-if="fileListAdv.length < limitImg">
                  <a-icon type="plus" />
                  <div class="ant-upload-text">建议尺寸430px*300px</div>
                </div>
              </a-upload>
              <el-dialog :visible="previewVisible" @close="handleCancel">
                <img alt="example" style="width: 100%" :src="previewImage" />
              </el-dialog>
            </div>
          </div>
          <div style="margin-top: 60px" class="item_adv">
            <div class="adt_n flex-align item_adv1">
              <span>广告链接</span><a-input class="adt_inp" v-model="linkUrl" />
            </div>
            <div class="item_adv1 flex-align" style="margin: 10px 0;">
              <div>
                <div class="flex-align adt_n" @click="tcVisible = true" v-if="showTc">
                  ①选择套餐
                  <a-icon type="right" />
                </div>
                <div class="flex-align adt_n" @click="tcVisible = true" v-else>
                  <div class="flex-align">
                    ①选择套餐<span style="
                    border-bottom: 2px solid #fff;
                    margin-left: 5px;
                    padding-bottom: 5px;
                  ">{{ configDay }}天，￥{{ tcPrice }}</span>
                  </div>
                </div>
              </div>
              <div>
                <div class="flex-align adt_n" style="margin-left: 20px" @click="tcCusVisible = true" v-if="showTcCus">
                  ②自定义套餐
                  <a-icon type="right" />
                </div>
                <div class="flex-align adt_n" style="margin-left: 20px" @click="tcCusVisible = true" v-else>
                  <div class="flex-align">
                    ②自定义套餐<span style="
                    border-bottom: 2px solid #fff;
                    margin-left: 5px;
                    padding-bottom: 5px;
                  ">{{ cusDay }}天，￥{{ tcPrice }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="flex-align" style="margin-top: 20px">
            <div class="adt_n flex-align"><span>链接内容截图</span></div>
            <div style="margin-left: 20px;width: 560px;">
              <a-upload name="image" accept=".jpeg,.png,.jpg" :action="$baseURL + '/biz/uploadImgage'"
                :headers="headers" list-type="picture-card" :file-list="fileListLink" :remove="handleRemove"
                @preview="handlePreview" @change="upChangeLink">
                <div v-if="fileListLink.length < 4">
                  <a-icon type="plus" />
                  <div class="ant-upload-text">图片上传</div>
                </div>
              </a-upload>
              <el-dialog :visible="previewVisible" :footer="null" @close="handleCancel">
                <img alt="example" style="width: 100%" :src="previewImage" />
              </el-dialog>
            </div>
          </div>
        </div>
        <div class="advType_con">
          <template v-if="advTypeIdx == 0">
            <div>
              用户打开遇识爱时,开屏广告将会在遇识爱app启动时展现,黄金点位助力品牌曝光。 可支持分时间段展示广告素材和落地页,满足客户个性化推广需求。
            </div>
          </template>
          <template v-else-if="advTypeIdx == 1">
            <div>
              用户使用遇识爱app时,视频广告将会在遇识爱app视频区域随机展现,黄金点位助力品牌曝光。 可支持分时间段展示广告素材和落地页,满足客户个性化推广需求。
            </div>
          </template>
          <template v-else-if="advTypeIdx == 2">
            <div>
              用户使用遇识爱app时,评论广告将会在遇识爱app视频评论区域随机展现,黄金点位助力品牌曝光。 可支持分时间段展示广告素材和落地页,满足客户个性化推广需求。
            </div>
          </template>
        </div>
        <div style="width: 45vw; margin-top: 50px" class="flex-between">
          <div></div>
          <!-- <div class="adt_n" @click="ggzVisible = true">广告主选择：<span class="ggz">{{adTitle}}</span>
          </div> -->
          <!-- <div v-if="putSta == 0" v-else>
            <div class="qhImg flex-align" v-if="advTypeIdx == 0">
              <span class="gif flex-center" :style="
                imgIdx == 1
                  ? ' color: #E44E4F;font-weight: 500;background: #ffffff;'
                  : ''
              " @click="qhImgClick(1)">动图</span>
              <span class="gif flex-center" :style="
                imgIdx == 2
                  ? ' color: #E44E4F;font-weight: 500;background: #ffffff;'
                  : ''
              " @click="qhImgClick(2)">图片</span>
            </div>
            <div class="vType_w flex-center" v-else-if="advTypeIdx == 1">
              <div class="vType_n flex-center">视频</div>
            </div>
            <div class="vType_w flex-center" v-else>
              <div class="vType_n flex-center">图片</div>
            </div>
          </div> -->
          <div class="advType_btn flex-center" v-if="putSta == 0" @click="putStaChange">
            立即投放
          </div>
          <div class="advType_btn flex-center" v-else @click="addAdvertisementRecord">
            立即投放
          </div>
        </div>
      </div>
      <div class="flex-column" style="margin-left: 50px; margin-top: 320px;margin-right: 50px;">
        <div class="flex-column" style="
            width: 36px;
            height: 54px;
            border-radius: 5px;
            box-sizing: border-box;
            border: 1px solid #fff;
          " @click="(putSta = 0), (bigTit = '丰富的广告类型')">
          <a-icon type="rollback" style="font-size: 20px; color: #fff" />
          <span style="font-size: 12px; line-height: 20px; color: #fff">返回</span>
        </div>
        <div class="flex-column" style="
            width: 36px;
            height: 54px;
            border-radius: 5px;
            box-sizing: border-box;
            border: 1px solid #fff;
            margin-top: 12px;
          " @click="toIndex">
          <a-icon type="home" style="font-size: 20px; color: #fff" />
          <span style="font-size: 12px; line-height: 20px; color: #fff">首页</span>
        </div>
        <div class="flex-column" style="
            width: 36px;
            height: 54px;
            border-radius: 5px;
            box-sizing: border-box;
            border: 1px solid #fff;
            margin-top: 12px;
          " @click="visibleFeedback = true">
          <a-icon type="message" style="font-size: 20px; color: #fff" />
          <span style="font-size: 12px; line-height: 20px; color: #fff">反馈</span>
        </div>
      </div>
    </div>

    <el-dialog :visible="ggzVisible" @close="ggzVisible = false" width="60%">
      <adSelect @selectIdx="selectIdx" :selectII="adIdx" :List="List"></adSelect>
    </el-dialog>
    <el-dialog :visible="tcVisible" @close="tcVisible = false" width="666px">
      <div class="tcTit">套餐选择</div>
      <div class="flex-wrap" style="margin-top: 20px; margin-left: 41px">
        <div v-for="(item, index) in configList" :key="index" @click="tcMclick(index)"
          :style="tcmIdx == index ? 'background: #F1403C;color: #FFFFFF;' : ''" class="tc_money flex-center"
          v-show="item.isCustom == 0">
          <div class="flex-column">
            <div>{{ item.estimatedTime }}天</div>
            <div>￥{{ item.costMoney }}</div>
          </div>
        </div>
        <div class="flex-align" style="width: 550px">
          <div style="font-size: 18px; color: #000000; margin-right: 20px">
            开始时间
          </div>
          <a-date-picker v-model="calendarTime" placeholder="请选择时间" :disabled-date="disabledDate"
            @change="timeChange" />
        </div>
        <div class="tc_line"></div>
        <div class="flex-align-between" style="width: 550px">
          <div class="payT">支付方式</div>
          <div class="flex-center">
            <div v-if="payType == 'wx'" class="payT_tit flex-center">
              <a-icon type="wechat" theme="filled" style="color: #40ba49; font-size: 18px; margin: 0 5px" />微信支付
            </div>
            <div v-else class="payT_tit flex-center">
              <a-icon type="alipay-square" theme="filled" style="color: #1677ff; font-size: 18px; margin: 0 5px" />支付宝支付
            </div>
            <div class="flex-column" style="margin-left: 10px">
              <a-icon type="up" style="color: #8590a6" @click="payTypeClick" />
              <a-icon type="down" style="color: #8590a6" @click="payTypeClick" />
            </div>
          </div>
        </div>
        <!-- <div>
          注：支付过程会使用您的广告金进行支付。您的余额：{{
            advertisementMoney
          }}
        </div> -->
        <div class="tcBtn flex-center" @click="tcConfrm">确定</div>
      </div>
    </el-dialog>

    <el-dialog :visible="tcCusVisible" @close="tcCusVisible = false" width="660px">
      <div class="tcTit">自定义套餐</div>
      <div class="flex-wrap" style="margin-top: 20px; margin-left: 41px">
        <div class="flex-center" style="width: 100%; margin: 30px 0">
          <div class="tc_money flex-center" style="background: #f1403c; color: #ffffff">
            <div class="flex-column">
              <div>{{ cusDay }}天</div>
              <div>￥{{ cusMoy * cusDay }}</div>
            </div>
          </div>
        </div>
        <div class="flex-align">
          <div style="color: #000; font-size: 18px">投放时间范围：</div>
          <a-range-picker v-model="fullTime" :disabled-date="disabledDate" @change="timeOk" format="YYYY-MM-DD" />
        </div>
        <div class="tc_line"></div>
        <div class="flex-align-between" style="width: 550px">
          <div class="payT">支付方式</div>
          <div class="flex-center">
            <div v-if="payType == 'wx'" class="payT_tit flex-center">
              <a-icon type="wechat" theme="filled" style="color: #40ba49; font-size: 18px; margin: 0 5px" />微信支付
            </div>
            <div v-else class="payT_tit flex-center">
              <a-icon type="alipay-square" theme="filled" style="color: #1677ff; font-size: 18px; margin: 0 5px" />支付宝支付
            </div>
            <div class="flex-column" style="margin-left: 10px">
              <a-icon type="up" style="color: #8590a6" @click="payTypeClick" />
              <a-icon type="down" style="color: #8590a6" @click="payTypeClick" />
            </div>
          </div>
        </div>
        <!-- <div>
          注：支付过程会使用您的广告金进行支付。您的余额：{{
            advertisementMoney
          }}
        </div> -->
        <div class="tcBtn flex-center" @click="tcCusConfrm">确定</div>
      </div>
    </el-dialog>

    <el-dialog :visible="visiblePay" @close="visiblePay = false">
      <div class="flex-column" style="padding-bottom: 30px">
        <div style="font-size: 30px; color: #3d3d3d">
          <template v-if="this.payType == 'wx'">微信支付</template>
          <template v-else>支付宝支付</template>
        </div>
        <div style="
            font-size: 18px;
            color: #646464;
            margin-top: 11px;
            margin-bottom: 30px;
          ">
          使用
          <template v-if="this.payType == 'wx'">微信</template>
          <template v-else>支付宝</template>
          扫描二维码完成支付
        </div>
        <div style="font-size: 18px; color: #646464; margin-bottom: 20px">
          支付金额：{{ tcPrice }}元
        </div>
        <div v-show="codeUrlShow">
          <VueQr v-if="codeUrl" :text="codeUrl" :margin="0" :size="200"></VueQr>
        </div>
      </div>
    </el-dialog>

    <el-dialog :visible="visibleFeedback" @close="visibleFeedback = false" width="660px">
      <fd @closeModal="visibleFeedback = false"></fd>
    </el-dialog>

    <el-dialog :visible="visibleRecharge" @close="visibleRecharge = false" width="25%">
      <recharge @successPay="successPay"></recharge>
    </el-dialog>

  </div>
</template>
<script>
import VueQr from "vue-qr";
import moment from "moment";

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });
}
import recharge from '@/components/recharge/recharge';
import fd from '@/components/fd/fd';
import adSelect from './adSelect.vue';
// import {
//   List
// } from "echarts";
export default {
  name: 'AdDetail',
  components: {
    adSelect,
    fd,
    VueQr,
    recharge
  },
  data() {
    return {
      visibleRecharge: false,

      adIdx: -1,
      adTitle: '',
      List: [],
      ggzVisible: false,
      cusInpV: "",
      tcVisible: false,
      tcCusVisible: false,
      bigTit: "广告设计投放 - 手机端",
      putSta: 0,
      advTypeList: [{
        title: "开屏广告",
      },
      {
        title: "视频广告",
      },
      {
        title: "评论广告",
      }
      ],
      imgIdx: 1,
      advTypeIdx: 0,

      fd1RG: -1,
      isSubmit1: false,
      isSubmit2: false,
      visibleFeedback: false,
      feedbackList: [{
        title: "产品建议",
      },
      {
        title: "功能故障",
      },
      {
        title: "其他问题",
      },
      ],
      valfd: undefined,
      valueFD: "",

      fileList: [],
      limitImg: 1,
      previewVisible: false,
      previewImage: "",

      fileListAdv: [],

      showCus: false,
      tcmIdx: 0,
      tcmList: [{
        num: 1000,
        money: 2,
      },
      {
        num: 1000,
        money: 10,
      },
      {
        num: 1000,
        money: 20,
      },
      {
        num: 1000,
        money: 50,
      },
      {
        num: 1000,
        money: 100,
      },
      ],
      showTc: true,
      showTcCus: true,
      tcPrice: "",
      playNum: "",

      fileListV: [],
      videoUrl: "",
      payType: "wx",
      visiblePay: false,
      advList: [{
        img: require('@/assets/img/sl_kp.png')
      },
      {
        img: "https://static.niwenwd.com/static/pic/1224488846.png",
      },
      {
        img: "https://static.niwenwd.com/static/pic/1254962605.png",
      },
      ],
      tjList: [{
        img: require('@/assets/img/sl_kp.png')
      }, {
        img: "https://static.niwenwd.com/static/pic/1224488846.png",
      },
      {
        img: "https://static.niwenwd.com/static/pic/1254962605.png",
      },
      ],
      xqList: [{
        img: "https://static.niwenwd.com/static/pic/1230025333.png",
      },
      {
        img: "https://static.niwenwd.com/static/pic/212738957.png",
      },
      ],
      spList: [{
        img: require('@/assets/img/sl_sp.png')
      }, {
        img: "https://static.niwenwd.com/static/pic/1280820792.png",
      },],
      configList: [],
      ggType: 2,
      configurationId: "",
      advTitle: "",
      linkUrl: "",
      extensionStartTime: "",

      codeUrlShow: false,
      codeUrl: "",
      advertisementMoney: "",
      configName: "",

      customList: {},
      cusMoy: "",
      cusDay: "",
      fullTime: [],
      calendarTime: "",
      pcPhone: 1,
      arrImg: [],
      fileListLink: [],
      fileType: 1,
    }
  },
  watch: {
    visiblePay(nV, oV) {
      console.log(nV, oV);
      if (nV && this.codeUrlShow) {
        this.timer = null;
        this.timer = setInterval(() => {
          this.getAccountDetail();
        }, 1000);
      } else {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    fd1RG(nV, oV) {
      console.log(nV, oV);
      if (nV != -1) {
        this.isSubmit1 = true;
      } else {
        this.isSubmit1 = false;
      }
    },
    textLength(nV, oV) {
      console.log(nV, oV);
      if (nV > 0) {
        this.isSubmit2 = true;
      } else {
        this.isSubmit2 = false;
      }
    },
  },
  computed: {
    headers() {
      return {
        session_token: localStorage.getItem("adv_session_token"),
        // session_token: '',
      };
    },
    textLength() {
      return (this.valueFD || "").length;
    },
  },
  methods: {
    successPay() {
      this.getAdvertisementUserMes()
    },
    async getAdvertisementUserMes() {
      let res = await this.$API.members.getAdvertisementUserMes({
        advertisementUserId: this.advertisementUserId
      })
      console.log('代理商信息', res)
      localStorage.setItem('advertisementUserMes', JSON.stringify(res.data))
      let advertisementUserMes = res.data
      // this.advertisementUserId = advertisementUserMes.advertisementUserId
      this.advertisementMoney = advertisementUserMes.advertisementBalance
    },

    selectIdx(e) {
      console.log('selectIdx', e, this.List[e].enterpriseName)
      this.adIdx = e
      this.adTitle = this.List[e].enterpriseName
      this.ggzVisible = false
    },
    handleRemove(file) {
      const index = this.fileListLink.indexOf(file);
      const newFileList = this.fileListLink.slice();
      newFileList.splice(index, 1);
      this.arrImg.splice(index, 1);
      this.fileListLink = newFileList;
      console.log("arrImg", this.arrImg);
    },
    upChangeLink({
      file,
      fileList
    }) {
      // console.log("链接图片", file,fileList);
      this.fileListLink = fileList;
      if (file.status === "done") {
        this.fileListLink.forEach((item) => {
          if (item.response.code == "500") {
            this.$message.error(item.response.msg);
            return false;
          }
          if (item.response.code == "200") {
            this.arrImg.includes(item.response.data.imgageUrl) ?
              "" :
              this.arrImg.push(
                item.response.data.imgageUrl
              );
            // console.log('arrImgUUU',this.arrImg);
          }
        });
      }
    },
    tcCusConfrm() {
      // console.log(this.customList)
      // console.log(this.fullTime)
      if (this.cusDay < 1 || this.fullTime.length == 0) {
        this.$message.error("请选择正确的时间范围！");
        return;
      }
      console.log(this.cusDay, this.cusDay * this.cusMoy);

      this.tcPrice = this.cusDay * this.cusMoy;
      // this.configurationId = this.customList[0].id;
      this.configurationId = this.customList.id;

      this.tcCusVisible = false;
      this.showTcCus = false;
      this.showTc = true;
    },
    async getLoginUserMyMessage() {
      let res = await this.$API.user.getLoginUserMyMessage();
      if (res.code == 200) {
        console.log("MyMessage", res);
        localStorage.setItem("memberMes", JSON.stringify(res.data.memberMes));
        localStorage.setItem("userInfo", JSON.stringify(res.data.user));
        this.advertisementMoney = res.data.user.advertisementMoney;
      }
    },
    async getAccountDetail() {
      let res = await this.$API.system.getAccountDetail({
        id: this.accountDetailId,
      });
      if (res.code == 200) {
        console.log("支付状态", res.data.status);
        if (res.data.status == 1) {
          this.$message.success("支付成功！");
          clearInterval(this.timer);
          this.timer = null;
          setTimeout(() => {
            this.visiblePay = false;
          }, 3000);
        } else if (res.data.status == -1) {
          this.$message.error("支付失败！");
          clearInterval(this.timer);
          this.timer = null;
        }
      }
    },

    //  微信支付
    async createAccountDetailOrder(accountDetailId) {
      let res = await this.$API.system.createAccountDetailOrder({
        body: '',
        outTradeNo: accountDetailId,
        totalFee: 0
      });
      if (res.code == 200) {
        console.log("微信支付", res.data.codeUrl);
        this.codeUrlShow = true;
        this.codeUrl = res.data.codeUrl;
        this.visiblePay = true;
      }
    },

    // 支付宝支付
    async createPay(accountDetailId) {
      let res = await this.$API.system.createPay({
        accountDetailId,
      });
      if (res.code == 200) {
        console.log("支付宝支付", res, window.location.href);
        localStorage.setItem("zfbPath", window.location.href);
        let url = res.data.body;
        console.log(url);
        window.open(url, "_blank");
      }
    },

    timeChange(date, dateString) {
      console.log(date, dateString);
      this.extensionStartTime = Date.parse(new Date(dateString)) / 1000;
    },
    async addAdvertisementRecord() {
      // return;
      if (!this.configurationId) {
        this.$message.error("请选择套餐！");
        return;
      }
      if (!this.extensionStartTime) {
        this.$message.error("请选择时间！");
        return;
      }
      if (!this.advTitle) {
        this.$message.error("请填写标题！");
        return;
      }
      if (!this.linkUrl) {
        this.$message.error("请填写链接！");
        return;
      }
      if (this.arrImg.length == 0) {
        this.$message.error("请上传链接内容截图！");
        return;
      }
      if (!this.fileUrl) {
        this.$message.error("请上传广告视频或图片！");
        return;
      }
      let res = await this.$API.system.addAdvertisementRecord({
        // sponsorId: this.List[this.adIdx].advertisementSponsorId,
        configurationId: this.configurationId,
        // pcPhone: this.pcPhone,
        title: this.advTitle,
        fileUrl: this.fileUrl,
        linkUrl: this.linkUrl,
        sexType: 0,
        picUrl: this.arrImg.toString(),
        costMoney: this.tcPrice,
        extensionStartTime: this.extensionStartTime,
        type: this.ggType,
        fileType: this.fileType,
      });
      if (res.code == 200) {
        console.log("广告记录", res);
        this.accountDetailId = res.data.accountDetailId;
        if (res.data.isNeedPay == 1) {
          // this.$message.error("广告金余额不足，请充值后重试！");
          // this.visibleRecharge = true
          if (this.payType == "wx") {
            this.$message.info("正在生成支付码，请稍等！");
            this.createAccountDetailOrder({
              accountDetailId: res.data.accountDetailId, totalFee: 0,
              body: ''
            });
          } else {
            this.createPay(res.data.accountDetailId);
          }
        } else {
          // this.getLoginUserMyMessage();
          this.$message.success("投放成功，审核中...");
          this.getAdvertisementUserMes()
          this.configurationId = ''
          this.extensionStartTime = ''
          this.advTitle = ''
          this.fileUrl = ''
          this.linkUrl = ''
          this.arrImg = []
          this.tcPrice = ''
          this.fileListLink = []
          this.fileListV = []
          this.videoUrl = ''
          this.showTc = true
          this.showTcCus = true
          setTimeout(() => {
            this.visiblePay = false;
          }, 1000);
        }
      }
    },
    async getAdvertisementConfigurationList() {
      let res = await this.$API.system.getAdvertisementConfigurationList({
        // pcPhone: this.pcPhone,
        type: this.ggType,
      });
      if (res.code == 200) {
        console.log("广告配置", res, this.ggType);
        this.configList = res.data.configList
        // this.configList = res.data.configList.filter((item) => {
        //   return item.isCustom == 0;
        // });
        // this.customList = res.data.configList.filter((item) => {
        //   return item.isCustom == 1;
        // });
        // this.customList.push(res.data.customConfig)
        // console.log(this.customList)
        this.customList = res.data.customConfig
        this.cusDay = 1;
        this.cusMoy = this.customList.costMoney;
      }
    },

    DateDiff(sDate1, sDate2) {
      var aDate, oDate1, oDate2, iDays;
      aDate = sDate1.split("-");
      oDate1 = new Date(aDate[1] + "-" + aDate[2] + "-" + aDate[0]); //转换为12-18-2002格式
      aDate = sDate2.split("-");
      oDate2 = new Date(aDate[1] + "-" + aDate[2] + "-" + aDate[0]);
      iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24); //把相差的毫秒数转换为天数
      return iDays;
    },

    timeOk(e) {
      if (e.length == 0) {
        this.extensionStartTime = "";
        this.cusDay = 1;
      } else {
        this.extensionStartTime =
          Date.parse(new Date(moment(e[0]._d).format("YYYY-MM-DD"))) / 1000;
        this.cusDay = this.DateDiff(
          moment(e[0]._d).format("YYYY-MM-DD"),
          moment(e[1]._d).format("YYYY-MM-DD")
        );
      }
      // console.log(
      //   e,
      //   moment(e[0]._d).format("YYYY-MM-DD"),
      //   moment(e[1]._d).format("YYYY-MM-DD"),
      //   this.DateDiff(
      //     moment(e[0]._d).format("YYYY-MM-DD"),
      //     moment(e[1]._d).format("YYYY-MM-DD")
      //   )
      // );
      // this.cusDay = this.DateDiff(
      //   moment(e[0]._d).format("YYYY-MM-DD"),
      //   moment(e[1]._d).format("YYYY-MM-DD")
      // );
    },
    moment,
    range(start, end) {
      const result = [];
      for (let i = start; i < end; i++) {
        result.push(i);
      }
      return result;
    },
    disabledDate(current) {
      // Can not select days before today and today
      return current && current < moment().endOf("day");
    },

    payTypeClick() {
      if (this.payType == "wx") {
        this.payType = "zfb";
      } else {
        this.payType = "wx";
      }
    },
    upChangeVideo({
      file,
      fileList
    }) {
      this.fileListV = fileList;
      if (file.status === "done") {
        // this.fileList = fileList;
        // console.log(fileList[0].response);
        if (fileList[0].response.code == "500") {
          this.$message.error(fileList[0].response.msg);
          return false;
        }
        if (fileList[0].response.code == "200") {
          console.log(fileList[0].response);
          this.fileUrl = fileList[0].response.data.fileUrl;
          this.videoUrl = fileList[0].response.data.fileUrl;
        }
      }
    },

    tcConfrm() {
      // console.log(this.calendarTime)
      if (!this.extensionStartTime || !this.calendarTime) {
        this.$message.error("请选择时间！");
        return;
      }
      this.tcPrice = this.configList[this.tcmIdx].costMoney;
      this.configurationId = this.configList[this.tcmIdx].id;

      this.configName = this.configList[this.tcmIdx].name;
      this.configDay = this.configList[this.tcmIdx].estimatedTime;

      this.tcVisible = false;
      this.showTc = false;

      this.showTcCus = true;
      // if (this.tcmIdx == 5) {
      //   this.tcPrice = this.cusInpV;
      //   this.playNum = Math.round(this.cusInpV * 0.2);
      // } else {
      //   this.tcPrice = this.tcmList[this.tcmIdx].money;
      //   this.playNum = this.tcmList[this.tcmIdx].num;
      // }
      // if (!this.tcPrice && !this.playNum) {
      //   this.showTc = true;
      //   return false;
      // } else {
      //   this.tcVisible = false;
      //   this.showTc = false;
      // }
    },
    cusInpchange() {
      console.log("cusInpchange", this.cusInpV);
      if (!this.cusInpV) {
        return false;
      }
      let reg = /^\+?[1-9]\d*$/;
      //校验播放量
      if (reg.test(this.cusInpV)) {
        this.showCus = true;
      } else {
        this.$message.error("播放量数值错误！");
        this.cusInpV = "";
        return false;
      }
    },
    tcMclick(i) {
      this.tcmIdx = i;
      // this.showCus = false;
      // if (i == 5) {
      //   this.$nextTick(() => {
      //     this.$refs.cusInput.focus();
      //   });
      // }
    },
    qhImgClick(i) {
      this.imgIdx = i;
      if (this.putSta == 1) {
        if (this.imgIdx == 1) {
          this.bigTit = "开屏动图广告";
        } else {
          this.bigTit = "开屏图片广告";
        }
      } else {
        if (this.imgIdx == 1) {
          this.ggType = 1;
        } else {
          this.ggType = 2;
        }
      }
      this.getAdvertisementConfigurationList();

      this.fullTime = [];
      this.calendarTime = "";
      this.showTc = true;
      this.showTcCus = true;
      this.extensionStartTime = "";
      this.configurationId = "";
    },
    putStaChange() {
      // if (!this.adTitle) {
      //   this.$message.error('请选择广告主')
      //   return;
      // }
      if (this.advTypeIdx == 0) {
        this.bigTit = "开屏广告";
        this.fileType = 1
        // if (this.imgIdx == 1) {
        //   this.bigTit = "开屏动图广告";
        // } else {
        //   this.bigTit = "开屏图片广告";
        // }
      } else if (this.advTypeIdx == 1) {
        this.bigTit = "视频广告";
        this.fileType = 2
      } else {
        this.bigTit = "评论广告";
        this.fileType = 1
      }
      this.putSta = 1;
      this.getAdvertisementConfigurationList();
    },
    toChangeAType(i) {
      this.advTypeIdx = i;
      if (i == 0) {
        this.advList = this.tjList;
        this.ggType = 2;
        // if (this.imgIdx == 1) {
        //   this.ggType = 1;
        // } else {
        //   this.ggType = 2;
        // }
      } else if (i == 1) {
        this.advList = this.spList;
        this.ggType = 3;
      } else {
        // this.advList = this.xqList;
        this.ggType = 4;
      }

      this.fullTime = [];
      this.calendarTime = "";
      this.showTc = true;
      this.showTcCus = true;
      this.extensionStartTime = "";
      this.configurationId = "";
    },
    handleCancel() {
      this.previewVisible = false;
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    // upChange({ fileList }) {
    //   this.fileList = fileList;
    //   // console.log(fileList);
    // },
    upChangeAdv({
      file,
      fileList
    }) {
      this.fileListAdv = fileList;
      if (file.status === "done") {
        console.log(fileList[0].response.data.imgageUrl);
        this.fileUrl = fileList[0].response.data.imgageUrl;
      }
    },
    // handleChangeFD(e) {
    //   console.log(e);
    // },
    // txChangeFD() {
    //   // console.log(e);
    // },
    toIndex() {
      console.log('Advertisers去这里');
      this.$router.replace({
        name: "Advertisers"
      })
    },



    async getSponsorList() {
      let res = await this.$API.members.getSponsorList({
        advertisementUserId: this.advertisementUserId,
        pageNumber: 1,
        pageSize: 1000000000,
        searchText: '',

      })
      console.log('广告主信息', res)
      this.List = res.data.rows.filter((item) => {
        return item.auditStatus == 1
      })
      if (this.adIdx >= 0) {
        this.adTitle = this.List[this.adIdx].enterpriseName
      }
    },

  },
  created() { },
  mounted() {
    let advertisementUserMes = JSON.parse(localStorage.getItem('advertisementUserMes'))
    this.advertisementUserId = advertisementUserMes.advertisementUserId
    this.advertisementMoney = advertisementUserMes.advertisementBalance
    console.log(this.$route.query)
    if (this.$route.query.index >= 0) {
      this.adIdx = this.$route.query.index
    }
    if (this.$route.query.typeAD >= 0) {
      this.advTypeIdx = this.$route.query.typeAD
      let i = this.advTypeIdx
      if (i == 0) {
        this.advList = this.tjList;
        this.ggType = 2;
      } else if (i == 1) {
        this.advList = this.spList;
        this.ggType = 3;
      } else {
        // this.advList = this.xqList;
        this.ggType = 4;
      }
    }
    // this.getSponsorList();

    // this.getLoginUserMyMessage();
    // this.getAdvertisementConfigurationList();
    // if (window.matchMedia("(min-width: 768px)").matches) {
    //   this.pcPhone = 1;
    // } else {
    //   this.pcPhone = 2;
    // }
  },
}
</script>
<style scoped lang="scss">
.adv_bj {
  // padding: 1px 0;
  background: linear-gradient(270deg, #ff564f 0%, #ff7d76 100%);
  // height: 94.5vh;
  overflow: scroll;
  padding-bottom: 20px;
  // max-height: 94.5vh;
  min-height: 94.5vh;
  // max-width: 100vw;
  min-width: 90vw;
}

.adv_tit {
  font-size: 46px;
  font-weight: bold;
  color: #ffffff;
}

.adv_cont {
  margin-top: 22px;
  font-size: 20px;
  font-weight: normal;
  color: #ffc2bf;
}

.advType_tit {
  font-size: 28px;
  color: #ffc2bf;
  margin-right: 50px;
  padding-bottom: 25px;
}

.advType_con {
  // width: 873px;
  width: 45vw;
  font-size: 24px;
  line-height: 39px;
  color: #ffffff;
  // margin-top: 82px;
  margin-top: 30px;
}

.qhImg {
  width: 202px;
  height: 57px;
  border-radius: 29px;
  background: #ff847e;

  .gif {
    width: 94px;
    height: 49px;
    line-height: 39px;
    border-radius: 29px;
    margin-left: 5px;
    color: #fff;
    font-size: 20px;
  }
}

.advType_btn {
  width: 182px;
  height: 57px;
  border-radius: 29px;
  background: #ffffff;

  font-size: 20px;
  font-weight: 500;
  line-height: 39px;
  color: #e44e4f;
}

.vType_w {
  width: 102px;
  height: 57px;
  border-radius: 29px;
  background: #ff847e;

  .vType_n {
    width: 94px;
    height: 49px;
    border-radius: 29px;
    background: #ffffff;

    font-size: 20px;
    font-weight: 500;
    line-height: 39px;
    color: #e44e4f;
  }
}


.adt_n {
  font-size: 20px;
  color: #ffffff;

  span {
    min-width: 80px;
  }
}

.ggz {
  border-bottom: 2px solid #ffffff;
}

.adt_inp {
  // width: 182px;
  width: 382px;
  font-size: 18px;
  margin-left: 10px;

  border: none;
  outline: none;
  color: #fff;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  border-bottom: 2px solid #ffffff;
}

.tcTit {
  font-size: 36px;
  font-weight: 500;
  line-height: 39px;
  color: #3d3d3d;
  text-align: center;
  border-bottom: 1px solid #d8d8d8;
  padding: 29px 0;
}

.tc_money {
  width: 165px;
  height: 88px;
  border-radius: 4px;
  box-sizing: border-box;
  border: 1px solid #f1403c;

  font-size: 20px;
  font-weight: 500;
  color: #f1403c;

  margin-right: 29px;
  margin-bottom: 20px;
}

.tcBtn {
  width: 552px;
  height: 55px;
  border-radius: 4px;
  // background: #11a4aa;
  background: #F1403C;
  font-size: 20px;
  color: #ffffff;
  margin-top: 77px;
  margin-bottom: 33px;
}

.cusNum {
  font-size: 12px;
  color: #8590a6;
}

.cusInp {
  width: 120px;
  border: none;
  outline: none;
  color: #fff;
  background: transparent;
  box-shadow: none;

  &::placeholder {
    color: #ffffff;
  }
}

.tc_line {
  width: 550px;
  height: 0px;
  border: 1px solid #d8d8d8;
  margin: 20px 0;
}

.payT {
  font-size: 18px;
  color: #999999;
}

.payT_tit {
  font-size: 18px;
  color: #8590a6;
}

::v-deep .el-dialog__wrapper .el-dialog {
  border-radius: 20px !important;
}





.item_adv {
  display: flex;
  flex-wrap: wrap;
  // align-content: flex-start;

  .item_adv1 {
    max-width: 50%;
    min-width: 520px;
    width: 100%;
  }
}




.flex-align {
  display: flex;
  align-items: center;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-align-column {
  display: flex;
  // align-items: center;
  flex-direction: column;
}

.flex-column {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.flex-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-align-between {
  display: flex;
  // align-items: center;
  justify-content: space-between;
}
</style>
